<template>
    <el-container id="container">
        <el-header id="header">
            <div class="left_box">
                <span>OA系统管理员后台</span>
            </div>
            <div class="right_box">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <div @click="logout">登出</div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <!--侧边栏-->
            <el-aside>
                <!--菜单导航栏 router开启路由跳转-->
                <el-col :span="12">
                    <el-menu
                            default-active="/userManage"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            v-bind:router="true">
                        <el-menu-item index="/userManage">
                            <i class="el-icon-user"></i>
                            <span slot="title">员工账号管理</span>
                        </el-menu-item>
                        <el-menu-item index="/processDefinition">
                            <i class="el-icon-dish"></i>
                            <span slot="title">流程管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-aside>
            <!--主视图-->
            <el-main>
                <!--子路由视图-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Home",
    mounted() {
        let vm = this;
        this.axios({
            url: '/myapi/user/testAdmin',
            method: 'get'
        }).then(function (response) {
            if(response.data.code===2001){
                vm.$message.error('你还未登录!');
                //后端返回的状态码为2001未登录，所以直接路由至管理员后台登录页面
                vm.$router.push("/adminLogin")
            }
            else if(response.data.code===4001){
                vm.$message.error('你不是管理员! 请不要登录后台!');
                //后端返回的状态码为4001权限不足，表示非管理员用户，路由至打卡登录页面
                vm.$router.push("/")
            }
        });
    },
    data(){
        return{

        }
    },
    methods:{
        logout(){
            var vm = this;
            vm.axios({
                url: '/myapi/logout',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200 && response.data.message==="注销成功"){
                    vm.$router.push("/adminLogin")
                }
            });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }

}
</script>

<style scoped>
    #container{
        height: 100%;
    }

    #header{
        display: flex;
        justify-content: space-between;
        background-color: #162332;
        color: #f8f1f1;
        text-align: center;
        line-height: 60px;
        align-items: center;
    }

    .left_box{
        margin-left: 15px;
        font-size: 20px;
    }

    .right_box{
        margin-right: 15px;
        font-size: 20px;
    }

</style>
